(function (Vue) {
    Vue.component("home", {
        template: `
            <h1>主页组件</h1>
        `,
    });
    Vue.component("product", {
        template: `
            <h1>产品组件</h1>
        `,
    });
    Vue.component("profile", {
        template: `
            <h1>公司介绍</h1>
        `,
    });
    let routes = [
        {
            path: "/home",
            component: "home",
        },
        {
            path: "/product",
            component: "product",
        },
        {
            path: "/profile",
            component: "profile",
        },
    ];
    window.addEventListener("hashchange", function (e) {
        // console.log(e);
        console.log(window.location.hash);
        let path = window.location.hash.split("#")[1];// /product /profile /home
        // 寻找路由对应的配置项
        let route_item = routes.find(v => {
            if (v.path === path) {
                return true;
            }
        })
        console.log(route_item);
        console.log(vm.componentId);
        vm.componentId = route_item.component;
    });
})(Vue);
